<template>
	<view>
		<cu-custom :isBack="true">
		</cu-custom>
		<form>
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('msisdn')}}</view>
				<input name="input" v-model="cardInfo.msisdn" />
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('iccid')}}</view>
				<input name="input" v-model="cardInfo.iccid" />
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('total')+$t('flow')}}</view>
				<input name="input" v-model="cardInfo.flowTotal" />
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('used')+$t('flow')}}</view>
				<input name="input" v-model="cardInfo.flowUsed" />
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('surplus')+$t('flow')}}</view>
				<input name="input" v-model="cardInfo.flowLeft" />
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('activation')+$t('time')}}</view>
				<input name="input" v-model="cardInfo.activationTime" />
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('overTime')}}</view>
				<input name="input" v-model="cardInfo.overTime" />
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('status')}}</view>
				<input name="input" v-model="cardInfo.phoneStatus" />
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">{{$t('current')+$t('month')+$t('used')+$t('flow')}}</view>
				<input name="input" v-model="cardInfo.flowCurrentMonthUsed" />
			</view>
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<button class="cu-btn shadow text-white" :style="{backgroundColor:themeConfig.primaryColor}"
						@tap="getCardInfo" data-target="menuModal">{{$t('refresh')}}</button>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		formatPhoneStatus
	} from '@/util/utils.js'
	import {
		formatDateTime
	} from '@/util/formatTime.js'
	import * as cardApi from '@/api/iot/iotCardApi.ts'
	export default {
		data() {
			return {
				cardInfo: {}
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad(option) {
			this.iccid = option.iccid
			this.getCardInfo()
		},
		methods: {
			getCardInfo() {
				cardApi.getCardInfo({
					iccid: this.iccid
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						const unKnow = this.$t('unKnow')
						data.overTime = formatDateTime(data.overTime, unKnow)
						data.phoneStatus = formatPhoneStatus(this, data.status) || unKnow
						this.cardInfo = data
					}
				})
			}
		}
	}
</script>

<style>

</style>
